<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" id="username" name="username"/>
<select id="s">
    <option>---请选择---</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
</select>
<p></p>
<br/>
<span id="sf">我是见证人</span><br/>
</body>
<script>
    //1. 根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2.  根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. 根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4.  根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性 获取当前元素的父元素
    let body = div1.parentElement;
    //alert(body);

    //6.创建新的元素,创建后需获取到父元素然后才能进行添加
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText = "合肥";

    //7.将子元素添加到父元素中
    let select = document.getElementById("s");
    select.appendChild(option);

    //8.通过父元素删除子元素
    //select.removeChild(option);

    //9.用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2,option);


    //10. innerText   添加文本内容，按照双引号内内容输出
    let div = document.getElementById("div1");
    div.innerText = "哈哈哈哈啊哈";
    //div.innerText = "<b>哈哈哈哈啊哈</b>";

    //11. innerHTML   添加文本内容，在添加时进行标签解析
    //div.innerHTML = "<b>变粗</b>";

    //innerHTML，是双向的：既可以赋值也可以取值
    let span=document.getElementById("sf");
    let vs=span.innerText;
    //alert(vs);

    //获取input元素对象
    let user=document.getElementById("username");
    //给username赋值
    user.value="苏政";
    //获取带有value属性的值的方式
    let username=user.value;
    alert(username);
</script>
</html>